<script setup lang="ts">
import {Chart, OmitedEChartsOption} from "@vue-chart/echart"

const props = defineProps({
  dataSource: {
    type: Array<any>,
    default: () => []
  }
})
const goodsNumber = ref({
  tmall: 0,
  taobao: 0,
  unknown: 0,
})
const seriesData = () => {
  return [
    {
      value: goodsNumber.value.taobao,
      name: '淘宝店',
    },
    {
      value: goodsNumber.value.tmall,
      name: '天猫店',
    },
    {
      value: goodsNumber.value.unknown,
      name: '未知',
    },
  ]
}
const options = ref({
  color: ['#ff5f00', '#1890ff', '#bfbfbf'],
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'horizontal',
    // orient: 'vertical',
    left: 'center',
  },
  series: [
    {
      name: '店铺类型',
      type: 'pie',
      radius: '50%',
      data: [
        ...seriesData(),
      ],
    },
  ],
})
const staticData = ref<Array<any>>([]);
const calcData = ()=>{
  props.dataSource.forEach((item, index) => {
    if (typeof item.isTmall=='undefined'){
      goodsNumber.value.unknown++
    }else {
      if (item.isTmall) {
        goodsNumber.value.tmall++
      }
      else {
        goodsNumber.value.taobao++
      }
    }
  })
  options.value = {
    ...options.value,
    series: [
      {
        ...options.value.series[0],
        data: [
          ...seriesData(),
        ],
      },
    ],
  }
  staticData.value = [
    {
      name: '淘宝店',
      value: goodsNumber.value.taobao,
      percent: (goodsNumber.value.taobao / props.dataSource.length * 100).toFixed(2) + '%',

    },
    {
      name: '天猫店',
      value: goodsNumber.value.tmall,
      percent: (goodsNumber.value.tmall / props.dataSource.length * 100).toFixed(2) + '%',
    },
    {
      name: '未知',
      value: goodsNumber.value.unknown,
      percent: (goodsNumber.value.unknown / props.dataSource.length * 100).toFixed(2) + '%',
    },
  ];
}

watch(() => props.dataSource, () => {
  calcData()
}, {
  deep: true,
})
calcData()
</script>

<template>
  <a-row type="flex">
    <a-col flex="1">
      <Chart :options="options"  style="height: 300px;"/>
    </a-col>
    <a-col style="width: 50%;">
      <base-table :columns="[
          {
            title: '店铺类型',
            dataIndex: 'name',
            sorter: (a, b) => a.name.length - b.name.length,
            key: 'name',
          },
          {
            title: '商品数量',
            dataIndex: 'value',
            width: 100,
            sorter: (a, b) => a.value - b.value,
            key: 'value',
          },
          {
            title: '占比',
            dataIndex: 'percent',
            width: 100,
            sorter: (a, b) => parseInt(a.percent) - parseInt(b.percent),
            key: 'percent',
          }
      ]" :data-source="staticData" size="small" :scroll="{
        y: 280,
      }"/>
    </a-col>
  </a-row>
</template>

<style scoped>

</style>
